<template>
  <div class="tag-table">
    <template v-if="list.length">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="overview-chart" id="history-chart"></div>
        </el-col>
        <el-col :span="16">
          <ul>
            <li v-for="(item, index) in list" :key="index">
              <el-row :gutter="20">
                <el-col :span="1">
                  <div><icon-svg :name="item.assetType | iconNameFormatter" class="typeIcon"></icon-svg></div>
                </el-col>
                <el-col :span="17">
                  <div>
                    <span class="click-item" @click="gotoDetial(item)">
                      {{ item.assetNm }}
                    </span>
                  </div>
                </el-col>
                <el-col :span="6" align="right">{{ item.exploreTm }}</el-col>
              </el-row>
            </li>
          </ul>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" align="right"><span class="click-item" @click="more">查看更多</span></el-col>
      </el-row>
    </template>
    <template v-else>
      <div class="no-records">
        <img src="../img/no-records.png" />
        <p>我还没有浏览过任何内容，快去试试吧！</p>
      </div>
    </template>
  </div>
</template>

<script>
import market from '../utils/market.js'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      list: [],
      historyChart: null
    }
  },
  methods: {
    getInfo() {
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/exploreLogList'),
        method: 'get',
        params: this.$ajax.setParams({
          currentPageNum: 1,
          pageSize: 5,
          queryParams: {
            userId: this.$store.state.user.id
          }
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.list = data.data.records
          if (this.list.length) this.getChart()
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getChart() {
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/exploreLogCount'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$nextTick(() => this.setChart(data.data))
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    setChart(data) {
      if (!this.historyChart) {
        this.historyChart = echarts.init(document.getElementById('history-chart'))
        window.addEventListener('resize', () => {
          this.historyChart.resize()
        })
      }
      let xAxis = []
      let series = []
      let color = []
      data.forEach(v => {
        xAxis.push(this.$dict('asset_type')[v.assetType])
        series.push(v.typeNum)
        color.push(market.computeColor(v.assetType))
      })
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '10%',
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              rotate: 40
            },
            data: xAxis
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: true
            },
            axisLine: {
              show: true
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 14,
            itemStyle: {
              normal: {
                color: params => {
                  return color[params.dataIndex]
                },
                label: {
                  textStyle: {
                    fontWeight: 'normal'
                  }
                }
              }
            },
            data: series
          }
        ]
      }
      this.historyChart.setOption(option)
      this.historyChart.resize()
    },
    gotoDetial(item) {
      market.gotoDetail(item)
    },
    more() {
      this.$blank('market-history-list')
    }
  }
}
</script>

<style lang="scss"></style>
